<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta charset="utf-8">
        <title>
            案例列表
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="/css/x-admin.css" media="all">
    </head>
    
    <body>
        <div class="x-body">
            <div class="layui-form-item">
                <label for="wztitle" class="layui-form-label">
                    <span class="x-red">*</span>案例风格
                </label>
                <div class="layui-input-inline">
                    <div class="layui-input-block" id="anliStyle">

                    </div>
                </div>
            </div>

            <form class="layui-form">



                <br><br>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button  class="layui-btn" lay-filter="add" lay-submit="">
                        查询
                    </button>
                </div>

            </form>
            <div class="x-body" id="bannerApp">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>
                            图片
                        </th>
                        <th>
                            大标题
                        </th>

                        <th>
                            小标题
                        </th>

                        <th>
                            设计师
                        </th>

                        <th>
                            顺序
                        </th>

                        <th>
                            操作
                        </th>

                    </tr>
                    </thead>
                    <tbody id="productTable">

                    </tbody>
                </table>

                <div id="page"></div>
            </div>

        </div>
        <script src="/js/jquery-2.2.4.min.js" charset="utf-8">
        </script>
        <script src="/lib/layui/layui.js" charset="utf-8">
        </script>
        <script src="/js/x-layui.js" charset="utf-8">
        </script>
        <script src="/js/vue.js" charset="utf-8">
        </script>
        <script>


            $(document).ready(function () {
                loadNavStyle();
            });

            function loadNavStyle() {
                $.ajax({
                    url: '/bo/listAnliNav',
                    type: 'GET', //GET
                    async: true,    //或false,是否异步
                    data: {

                    },
                    timeout: 10000,    //超时时间
                    dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    success: function (ajaxData, textStatus, jqXHR) {
                        if (1000 != ajaxData.code) {
                            layer.alert(ajaxData.message, {icon: 6},function () {});
                            return;
                        }

                        let msg = '';
                        let results = ajaxData.data;
                        for (let i=0;i<results.length;i++) {
                            msg += results[i].navTitle + '：<input type="radio" name="zxStyle" value="'+results[i].id+'"><br><br>';
                        }
                        $('#anliStyle').html(msg);
                    }
                });
            }


            var imageFilename = '';
            layui.use(['form','layer', 'upload'], function(){
                $ = layui.jquery;
              var form = layui.form();
              var layer = layui.layer;

                layui.upload({
                    url: '/bo/common/upload.html', //上传接口
                    success: function(res){ //上传成功后的回调
                        imageFilename = res.data.filename;
                        $('#productImage').html('<img src="'+ res.data.imageUrl +'" width="100px" height="40px">');
                    }
                });

                var featurePro = [];
              //监听提交
              form.on('submit(add)', function(data){

                //发异步，把数据提交给服务器
                  loadAnli();
                return false;
              });
            });

            function loadAnli() {
                $.ajax({
                    url: '/bo/listAnli',
                    type: 'GET', //GET
                    async: true,    //或false,是否异步
                    data: {
                        zxStyle : $("input[name='zxStyle']:checked").val()
                    },
                    timeout: 10000,    //超时时间
                    dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    success: function (ajaxData, textStatus, jqXHR) {
                        if (1000 != ajaxData.code) {
                            layer.alert(ajaxData.message, {icon: 5},function (index) {
                                layer.close(index);
                            });
                            return;
                        }

                        let msg = '';
                        let results = ajaxData.data;
                        for (let i=0;i<results.length;i++) {
                            msg += '                            <tr>\n' +
                                '                                <td><img src="'+results[i].picUrl+'" width="60px" height="40px"></td>\n' +
                                '                                <td>'+results[i].picTitle+'</td>\n' +
                                '                                <td>'+results[i].valueCase1+'</td>\n' +
                                '                                <td>'+results[i].valueText2+'</td>\n' +
                                '                                <td><input type="text" id="'+results[i].id+'" value="'+results[i].href2+'">&nbsp;<button onclick="saveSx('+results[i].id+')">保存</button></td>\n' +
                                '                                <td><button onclick="del('+results[i].id+')">删除</button>&nbsp;<button onclick="modifyxx('+results[i].id+')">修改</button></td>\n' +
                                '                            </tr>';
                        }
                        $('#productTable').html(msg);
                    }
                });
            }

            function saveSx(id) {
                var sxV = $('#' + id).val();
                $.ajax({
                    url: '/bo/modifySx',
                    type: 'POST', //GET
                    async: true,    //或false,是否异步
                    data: {
                        id : id,
                        sxValue:sxV
                    },
                    timeout: 10000,    //超时时间
                    dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    success: function (ajaxData, textStatus, jqXHR) {
                        if (1000 != ajaxData.code) {
                            layer.alert(ajaxData.message, {icon: 5},function (index) {
                                layer.close(index);
                            });
                            return;
                        }

                        layer.alert("顺序修改成功", {icon: 6}, function (index) {
                            layer.close(index);
                            loadAnli();
                        });
                    }
                });
            }

            function modifyxx(id) {
                window.location.href = "/bo/toModifyAnli.html?anliId=" + id;
            }

            function del(id) {
                $.ajax({
                    url: '/bo/delKeyValue',
                    type: 'POST', //GET
                    async: true,    //或false,是否异步
                    data: {
                        id : id
                    },
                    timeout: 10000,    //超时时间
                    dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    success: function (ajaxData, textStatus, jqXHR) {
                        if (1000 != ajaxData.code) {
                            layer.alert(ajaxData.message, {icon: 5},function (index) {
                                layer.close(index);
                            });
                            return;
                        }

                        layer.alert("删除成功", {icon: 6}, function (index) {
                            layer.close(index);
                            loadAnli();
                        });


                    }
                });
            }
        </script>
        <script>

        </script>
    </body>

</html>